<!DOCTYPE html>
<html lang="en" ng-app="pm25">
<head>
    <meta charset="UTF-8">
    <title>PM2.5 | Online Node Service Monitoring</title>
    <script type="text/javascript">
        var __uuid = '${uuid}';
        var __bucket = '${bucket}';
        var __servertime = '${servertime}';
        var __lags = new Date().getTime() - ${servertime};
        var __public_key = '${public_key}';
    </script>
    <script type="text/javascript" src="/js/vendor/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/vendor/moment-with-locales.js"></script>
    <script type="text/javascript" src="/js/vendor/angular/angular.js"></script>
    <script type="text/javascript" src="/js/vendor/angular/angular-cookies.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/controllers/hostListController.js"></script>
    <script type="text/javascript" src="/js/filters/decimalPlacesFilter.js"></script>
    <script type="text/javascript" src="/js/filters/humaniseFilter.js"></script>
    <script type="text/javascript" src="/js/filters/memoryFilter.js"></script>
    <script type="text/javascript" src="/js/filters/uptimeFilter.js"></script>
    <script type="text/javascript" src="/js/filters/ansiToHtml.js"></script>
    <script type="text/javascript" src="/js/filters/timestampParseFilter.js"></script>
    <script type="text/javascript" src="/js/filters/serverNameFilter.js"></script>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/bootstrap-3.3.4.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/pm25.css">
    <link rel="icon" type="image/png" href="/img/favicon.png">
</head>
<body>

<script type="text/javascript">
    if(self !== top) {
        document.write('<style>body { background: none; }</style>');
    }
</script>

<article ng-controller="hostListController" class="dashboard">
    <div class="pm25"><img src="/img/pm25-logo-latest.png" alt=""></div>
    <h1 hidden>PM2 Process Monitor</h1>
    <ul class="nav nav-tabs" ng-hide="list.length == 1">
        <li ng-repeat="tab in tabs" ng-class="{active: tab.selected}">
            <a ng-click="changeHost(tab.title)" data-toggle="tab">{{tab.title}}</a>
        </li>
    </ul>
    <p class="clearfix" style="margin-top: -55px;" hidden>
        <button type="button" class="btn btn-default pull-right" ng-click="doLogout()" style="margin-left: 5px;">
            <span class="glyphicon glyphicon-off" aria-hidden="true"></span> 退出登录
        </button>
        <button type="button" class="btn btn-default pull-right" ng-click="triggerManage()" style="margin-right: 5px;">
            <span class="glyphicon glyphicon-flash" aria-hidden="true"></span> 监控报警
        </button>
    </p>
    <!--pending-->
    <div class="spinner" ng-if="hostListPending === true">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
    <!--empty-->
    <section class="nothing" ng-if="hostListLength === 0 && !hostListPending">
        <alert class="alert-error" type="error">No data to display.</alert>
    </section>
    <!--filter-->
    <form class="form host-filter-form" ng-if="hostListLength !== 0 && !hostListPending && hostListLength > 3">
        <div class="form-group">
            <label class="sr-only" for="exampleInputAmount">过滤器</label>
            <div class="input-group">
                <div class="input-group-addon">过滤器</div>
                    <input type="text" class="form-control" id="exampleInputAmount" placeholder="服务器名称" ng-model="filter.filterServerName">
                <div class="input-group-addon">包含{{hostListLength}}台服务器</div>
            </div>
        </div>
    </form>
    <!--wrapper-->
    <section class="wrapper" ng-repeat="(hostname, host) in hostList | serverName:filter.filterServerName" ng-class="{'delay': host.delay}" ng-show="host.delay <= 3600 * 1000">
        <section class="system" ng-show={{host.processes}}>
            <h2>{{host.server_name}} <span ng-show="host.delay">(Delay: {{host.delay/1000}}s)</span> <a href="/transactions/server/{{host.public_key}}/{{host.server_name}}" target="_blank"><i class="glyphicon glyphicon-random"></i></a></h2>
            <alert ng-hide={{host.processes}} class="alert-error" type="error">The version of pm2 running on {{hostData.system.hostname}} is incompatible with pm2-web {{pm2WebVersion}} - please upgrade pm2 to {{pm2VersionRequired}} or higher.</alert>
            <table class="table" ng-show={{host.processes}}>
                <thead>
                    <tr>
                        <th>Processes</th>
                        <th>CPUs</th>
                        <th>Load</th>
                        <th>Uptime</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{host.processes.length}}</td>
                        <td>{{host.server.cpu.number}}</td>
                        <td><span ng-repeat="load in host.server.loadavg track by $index">{{load | decimalPlaces:2}}</span></td>
                        <td>{{host.server.uptime | humanise}}</td>
                    </tr>
                </tbody>
            </table>
            <figure id="memory" ng-show={{host.server}}>
                <figcaption>Memory ({{host.server.total_mem | memory}} total)</figcaption>
                <div style="width: {{(host.server.free_mem / host.server.total_mem) * 100}}%">{{host.server.free_mem | memory}} Free</div><div style="width: {{100 - ((host.server.free_mem / host.server.total_mem) * 100)}}%">{{host.server.total_mem - host.server.free_mem | memory}} Used</div>
            </figure>
        </section>
        <section class="processes" ng-show={{host.processes}}>
            <h2>Processes</h2>
            <p class="noprocesses" ng-show="host.processes.length == 0">There are no processes running.</p>
            <article ng-repeat="process in host.processes">
                <ul class="information" ng-class="{'reloading': process.reloading, 'erroring': process.throwing}">
                    <li class="pid">
                        <h3>PID</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{process.pid}}</p>
                    </li>
                    <li class="script">
                        <h3>Name</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{process.name}}</p>
                    </li>
                    <li class="restarts">
                        <h3>Restarts</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{process.restart_time}}</p>
                    </li>
                    <li class="uptime">
                        <h3>Uptime</h3>
                        <p ng-hide="process.status == 'online'" ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">N/A</p>
                        <p ng-show="process.status == 'online'" ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{process.pm_uptime | uptime | humanise}}</p>
                    </li>
                    <li class="status {{process.status}}">
                        <h3>Status</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">
                            <i title="Online" ng-show="process.status == 'online'" class="icon-ok-circle {{process.status}}"></i>
                            <i title="Stopping" ng-show="process.status == 'stopping'" class="icon-ban-circle {{process.status}}"></i>
                            <i title="Stopped" ng-show="process.status == 'stopped'" class="icon-ban-circle {{process.status}}"></i>
                            <i title="Error!" ng-show="process.status == 'errored'" class="icon-exclamation-sign {{process.status}}"></i>
                            <i title="Launching" ng-show="process.status == 'launching'" class="icon-repeat {{process.status}}"></i>
                        </p>
                    </li>
                    <li class="cpu">
                        <h3>CPU</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{process.cpu | decimalPlaces:2}}%</p>
                    </li>
                    <li class="memory">
                        <h3>Memory</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{process.memory | memory}}</p>
                    </li>
                    <li class="status">
                        <h3>Errors</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{host.logs[process.pm_id].length}}</p>
                    </li>
                    <li class="tps" ng-show="{{process.axm_monitor && process.axm_monitor['req/sec']}}">
                        <h3>TPS</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">{{process.axm_monitor['req/sec'].value}}</p>
                    </li>
                    <li class="actions">
                        <h3>Actions</h3>
                        <p ng-click="toggleDetails(process.pm_id, host.server_name, process.pid)">
                            <a class="icon-refresh" title="Restart process" ng-hide="process.status != 'online'" ng-click="execute(host.server_name, host.public_key, process.name, 'restart', $event)"></a>
                            <a class="icon-repeat" title="Reload process" ng-hide="process.status != 'online'" ng-click="execute(host.server_name, host.public_key, process.name, 'reload', $event)" ng-show="process.mode == 'cluster'"></a>
                        </p>
                    </li>
                </ul>
                <div class="details" ng-show="showDetails[process.pm_id + host.server_name]">
                    <h3>Logs</h3>
                    <ul scrollglue>
                        <li ng-repeat="log in host.logs[process.pm_id] track by $index" class="{{log.type}}" ng-bind-html="log.message + ' # ' + (log.at | timestampParse) + '\n' + log.stack | ansiToHtml" />
                    </ul>
                </div>
                <div class="profiling" ng-show="showDetails[process.pm_id + host.server_name] && process.axm_actions.length">
                    <button class="btn btn-default btn-xs" type="button" ng-repeat="axm_action in process.axm_actions" ng-click="executeCustomAction(host.server_name, host.public_key, process.pm_id, axm_action.action_name, undefined, process, axm_action.action_name, $event)">
                        <span ng-if="axm_action.action_name === 'km:heapdump'">HeapDump</span>
                        <span ng-if="axm_action.action_name === 'km:cpu:profiling:start'">CPU Profile Start</span>
                        <span ng-if="axm_action.action_name === 'km:cpu:profiling:stop'">CPU Profile Stop</span>
                    </button>

                    <button class="btn btn-default btn-xs" type="button" ng-if="process.heapdump" ng-click="downloadFile(process.file_name_heapdump, $event)">
                        <span>Download Snapshot</span>
                    </button>

                    <button class="btn btn-default btn-xs" type="button" ng-if="process.cpuprofile" ng-click="downloadFile(process.file_name_cpuprofile, $event)">
                        <span>Download CPU Profile</span>
                    </button>

                    <button class="btn btn-default btn-xs" type="button" ng-if="process.cpuprofile" ng-click="viewSunburstGraph(process.file_name_cpuprofile, $event)">
                        <span>CPU Sunburst</span>
                    </button>
                </div>
            </article>
        </section>
    </section>
</article>

<footer class="ng-scope">
    <a href="http://pm25.io/docs/">
        <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;&nbsp;帮助文档
    </a>
    <small class="ng-binding">PM2.5 version 0.143.5</small>
</footer>

</body>
</html>
